<template>
  <div class="Project row">
    <!-- 左侧区域 -->
    <div class="col-2 offset-1">
      <!-- 过滤标签搜索框 -->
      <el-input placeholder="输入关键字进行过滤标签" v-model="filterText" style="position: fixed;top: 100px;width: 20%;">
      </el-input>
  
      <!-- 手风琴菜单 -->
      <el-tree class="filter-tree" :data="data" :props="defaultProps" accordion @node-click="handleNodeClick" :filter-node-method="filterNode" ref="tree">
      </el-tree>
    </div>
  
    <!-- 右侧区域 -->
    <div class="col-7">
      <!-- 路由渲染 方案分类页面或搜索结果页面 -->
      <router-view></router-view>
    </div>
  
  </div>
</template>

<script>
  export default {
    data() {
      return {
        url: { // Api 链接
          projectClassApi: this.$Global.url.class
        },
        projectClassData: [], // 分类标题数据
        filterText: "", // 过滤搜索框数据
        data: [], // 分类菜单栏数据
        defaultProps: { // 分类菜单栏数据
          children: "children",
          label: "label"
        }
      };
    },
    /**
     * 监听分类搜索框，关键字过滤
     */
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() {
      // 开发模式
      // if (process.env.NODE_ENV === "development") {
        this.url.projectClassApi = this.$Global.url.baseUrl + this.$Global.url.class;
        // 获取分类标题的信息
        this.getProjectClass();
      // }
    },
    methods: {
      /**
       * 标题过滤函数
       */
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      /**
       * 手风琴点击函数
       * 点击手风琴节点跳转到分类方案页面
       */
      handleNodeClick(data) {
        var params = {
          classId: data._id,
          class: data.label,
          sort: "0",
          level: data.level,
          page: 1
        };
        this.$router.push({
          name: "class",
          params
        });
        // console.log(data);
      },
      /**
       * 获取方案分类标题数据
       */
      getProjectClass() {
        this.$http.get(this.url.projectClassApi).then(response => {
            if (response.status == 200) {
              this.projectClassData = response.data.categories;
              // console.log(this.projectClassData);
              this.setData();
            } else {
              console.log("请求数据失败！");
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      /**
       * 设置手风琴标题数据
       */
      setData() {
        var childrenData = [];
        // 设置全部分类标题
        this.data = this.data.concat({
          id: 1,
          label: this.projectClassData[0].name,
          level: 0
        });
  
        // 循环写入方案分类标题
        for (var i = 1, id = this.projectClassData.length; i < this.projectClassData.length; i++) {
  
          //循环写入方案分类子标题
          for (var j = 1; j < this.projectClassData[i].children.length; j++) {
            // id 是标题的序号
            id += 1;
            // childrenData 用于临时存储大分类的子分类数组
            childrenData = childrenData.concat({
              id: id,
              label: this.projectClassData[i].children[j].name,
              _id: this.projectClassData[i].children[j]._id,
              level: 2
            });
            // console.log(childrenData);
          }
          // 将数据存入分类菜单栏数据数组中
          this.data = this.data.concat({
            id: i + 1,
            label: this.projectClassData[i].name,
            _id: this.projectClassData[i]._id,
            level: 1,
            children: childrenData
          });
          childrenData = [];
        }
        // console.log(this.data);
      }
    }
  };
</script>

<style scoped>
  .filter-tree {
    color: #4a4a4a;
    position: fixed;
    top: 150px;
    width: 20%;
    /* background-color: #cca460; */
    border-radius: 4px;
    height: 60%;
    overflow: scroll;
    padding: 20px;
  }
</style>
<style>
  .el-tree-node__label {
    font-size: 16px!important;
  }
</style>

